import { Image, View } from '@tarojs/components';
import ImageConstant from '@/constant/ImageConstant';
import { ImagePreview } from '@nutui/nutui-react-taro';
import { useState } from 'react';
import './index.less';

interface IProps {
  imgList: string[];
}

const HouseImageList = (props: IProps) => {
  const {imgList} = props;

  // 图片预览
  const [showPreview, setShowPreview] = useState(false);
  const [previewPoint, setPreviewPoint] = useState(1);

  /**
   * 设置图片预览
   */
  const openShowPreview = (idx: number) => {
    setPreviewPoint(idx + 1);
    setShowPreview(true);
  };

  return (
    <>
      <View className='house-img-container'>
        {
          imgList.map((url: string, idx: number) => {
            return (
              <View
                onClick={ () => openShowPreview(idx) }
                key={ idx }
                className={ `house-img ${ imgList.length === 1 ? 'one-img' : '' }` }
              >
                <Image src={ `${ ImageConstant.SERVER_ROOT }${ url }` } mode='aspectFill'/>
              </View>
            );
          })
        }
      </View>
      <ImagePreview
        images={ imgList.map((src: string) => ({src: `${ ImageConstant.SERVER_ROOT }/${ src }`})) }
        visible={ showPreview }
        defaultValue={ previewPoint }
        onClose={ () => setShowPreview(false) }
      />
    </>
  );
};

export default HouseImageList;